<template>
  <el-dialog title="下发考试" :visible="dialogVisible" @close="handleClose()" width="80%">
    <el-row :gutter="24">
      <el-col :span="6">
        <el-form :model="form">
          <el-form-item label="卷名" :label-width="formLabelWidth">
            <el-input v-model="waitPaperName" autocomplete="off" disabled></el-input>
          </el-form-item>
        </el-form>
        <label>部门</label>
        <el-tree :data="deptTree" show-checkbox :check-strictly="true" node-key="deptId" :props="{ label: 'deptName' }"
          @check-change="handleClick" ref="tree">
        </el-tree>
      </el-col>
      <el-col :span="12">
        <el-input placeholder="请输入内容" v-model="waitPaperName" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%; margin-top: 20px"
          height="350" @selection-change="handleSelectionChange" border>
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="customerUser.userName" label="姓名" >
          </el-table-column>
          <el-table-column prop="customerUser.phoneNumber" label="手机号" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="日期" width="120">
            <template slot-scope="scope">{{ scope.row.createTime }}</template>
          </el-table-column>
        </el-table>
        <div>
          <pagination :current="gather.current" :total="total" :size="gather.size" @sizeChange="sizeChange"
            @currentChange="currentChange"></pagination>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="height: 30px; margin-top: 10px">
          <label>已选人员:<span>{{ form.waitUserNum }}</span></label>
        </div>
        <el-scrollbar>
          <el-table ref="multipleTable" :data="selectedTableData" tooltip-effect="dark" height="350"
            style="width: 100%; margin-top: 20px; height: 100%" @selection-change="handleSelectionChange" border>
            <el-table-column prop="nickName" label="姓名"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button @click.native.prevent="
                  deleteRow(scope.$index, selectedTableData)
                " type="text" size="small">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm()">确 定</el-button>
    </div>
  </el-dialog>
</template>


<script >
import Pagination from "@/components/Pagination/pagination.vue";
import { queryDeptTree } from '@/api/common/common.js'
import { saveWaitPaper } from '@/api/onlineQuestion/paperQuestion'
import {pageList} from '@/api/sys/sysUser'
export default {
  components: { Pagination },
  props: {
    waitPaperName: {
      type: String,
      default: "",
    },
    paperId: {
      type: Number,
      default: 0
    }
    ,
    examPaperId: {
      type: Number,
      default: 0
    }

  },
  data() {
    return {
      gather: {
        current: 1, //默认第一页
        size: 10, //一页展示10条
      },
      total: 0,
      deptTree: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      input3: "",
      dialogVisible: false,
      formLabelWidth: "40px",
      form: {
        paperName: "",
        userIds: [],
        waitUserNum: 0,
        paperId: 0,
        examPaperId: 0
      },
      tableData: [],
      selectedTableData: [],
      multipleSelection: [],
      searchParams: {
        current: 1, //默认第一页
        size: 10, //一页展示10条
      },

      newArr: [],
    };
  },
  created() {
    this.queryDept();
  },
  methods: {
    // 点击页码及上一页下一页按钮操作
    currentChange(val) {
      this.gather.current = val;
      this.searchParams.current = val;
      this.queryUserAll(this.searchParams); //调用接口方法
    },
    //每页展示几条按钮操作
    sizeChange(val) {
      this.gather.size = val;
      this.searchParams.size = val;
      this.queryUserAll(this.searchParams);
    },
    // 部门数据
    queryDept() {
      queryDeptTree({}).then(res => {
        this.deptTree = res.data
      })
    },
    //部门人员
    queryUserAll(params) {
      pageList(JSON.stringify(params)).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }

      })
      
    },

    //显示弹窗
    show() {
      this.dialogVisible = true;
      this.queryUserAll(this.searchParams);
    },
    //提交表单
    submitForm() {
      this.getPostParams();
      saveWaitPaper(JSON.stringify(this.form)).then(res => {
        if (res.code === 200) {
          this.handleClose();
        }
      })
    },

    //关闭弹窗
    handleClose() {
      this.dialogVisible = false;
      //清空表单
      this.newArr = [];
      this.form.waitUserNum = 0;
      this.tableData = [];
      this.form.paperName = "";
      this.$refs.tree.setCheckedKeys([]);
      this.selectedTableData = [];
      this.form.userIds = [];
    },
    // 已选名单人员点击事件
    handleSelectionChange(val) {
      // 缓存用于记录
      for (const t of val) {
        // 检查缓存中是否已经存在
        if (this.newArr.find((c) => c.userId === t.userId)) {
          // 已经存在说明以前记录过，现在这个就是多余的，直接忽略
          continue;
        }
        // 不存在就说明以前没遇到过，把它记录下来
        this.newArr.push(t);
      }
      this.selectedTableData = [];
      this.selectedTableData = this.newArr;
      this.form.waitUserNum = this.newArr.length;
    },
    //部门节点点击事件
    handleClick(data, checked, node) {
      if (checked) {
        this.$refs.tree.setCheckedKeys([data.deptId]);
        //根据部门id刷新人员列表
        this.searchParams.deptId = data.deptId;
        this.queryUserAll(this.searchParams);
      }
    },
    //移除已选人员
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    //获取提交的用户id
    getPostParams() {
      this.form.paperName = this.waitPaperName;
      this.form.paperId = this.paperId;
      this.form.examPaperId = this.examPaperId;
      for (let item of this.selectedTableData) {
        this.form.userIds.push(item.customerUser.customerUserId);
      }
    },
  },
};
</script>
<style scoped>
.el-select .el-input {
  width: 130px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

/* 设置滚动条的宽度 */
.el-table__body-wrapper::-webkit-scrollbar {
  width: 10px;
}

/* 设置滚动条的背景色和圆角 */
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: pink;
  border-radius: 8px;
}
</style>
